<template>
    <div class="bac-container-none-padding account-container">
        <div class="bac-container-title">我的账号</div>
        <el-form label-width="80px" size="small" class="main-form" v-loading="loading">
            <el-form-item label="手机号码" prop="phone">
                <el-input v-model="phone" readonly="readonly"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="openDialog">修改</el-button>
                <el-button type="danger">注销账号</el-button>
            </el-form-item>

        </el-form>
        <el-dialog
                :title="step == 1 ? '确认身份' : '请输入新手机号码'"
                :visible.sync="dialogVisible"
                width="30%">
            <!--确认信息-->
            <el-form label-width="80px" size="medium" :inline="true" ref="formPhone1" :rules="phoneRules"
                     :model="params" v-loading="loading" v-if="step == 1">
                <el-form-item label="手机号码" prop="phone">
                    <el-input v-model="params.phone" readonly="readonly"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="validateCode">
                    <el-input style="width: 150px;margin-right: 10px" v-model="params.validateCode"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="getValidateCode">{{getValidateCodeTime == null ?
                        '点击获取':getValidateCodeTime +'s后获取'}}
                    </el-button>
                </el-form-item>
            </el-form>
            <!--输入新信息-->
            <el-form label-width="80px" size="medium" :inline="true" ref="formPhone2" :rules="phoneRules"
                     :model="params" v-loading="loading" v-else>
                <el-form-item label="手机号码" prop="phone">
                    <el-input v-model="params.phone"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="validateCode">
                    <el-input style="width: 150px;margin-right: 10px" v-model="params.validateCode"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="getValidateCode">{{getValidateCodeTime == null ?
                        '点击获取':getValidateCodeTime +'s后获取'}}
                    </el-button>
                </el-form-item>
                <el-alert title="请确认信息后再修改，手机号码修改后旧手机将不再允许登陆" type="error"></el-alert>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submit">确定</el-button>
                <el-button @click="closeDialog">取消</el-button>
          </span>
        </el-dialog>

    </div>
</template>

<script>
    import common from '@/api/common';

    export default {
        data: function () {

            let checkPhone = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('手机号不能为空'));
                } else {
                    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                    if (reg.test(value)) {
                        callback();
                    } else {
                        return callback(new Error('请输入正确的手机号'));
                    }
                }
            };
            return {
                step: 1,
                phone: "",
                dialogVisible: false,
                dialogVisible2: false,
                loading: false,
                params: {},
                getValidateCodeTime: null,
                phoneRules: {
                    phone: [
                        {required: true, validator: checkPhone, trigger: 'blur'}
                    ],
                    validateCode: [
                        {required: true, message: '请输入验证码', trigger: 'blur'},
                        {min: 4, max: 4, message: '请输入4位验证码', trigger: 'change'}
                    ]
                }
            }
        },
        methods: {
            getUserInfo() {
                this.loading = true;
                this.$post("/user/getPhone").then((res) => {
                    this.phone = res.data;
                    this.loading = false;
                }).catch(err => {
                    console.log(err)
                    this.loading = false;
                })
            },
            openDialog() {
                this.params.phone = this.phone;
                this.dialogVisible = true;
            },
            closeDialog() {
                this.params = {};
                this.step = 1;
                this.dialogVisible = false;
            },
            getValidateCode() {
                if (this.params.phone == null) {
                    return;
                }
                if (this.getValidateCodeTime != null) {
                    return;
                }
                this.$post("/user/getVerificationCodeTest", {phone: this.params.phone}).then((res) => {
                    this.getValidateCodeTime = 60;
                    let inter = setInterval(() => {
                        this.getValidateCodeTime = this.getValidateCodeTime - 1;
                        if (this.getValidateCodeTime <= 0) {
                            clearInterval(inter);
                            this.getValidateCodeTime = null;
                        }
                    }, 1000);

                }).catch(err => {
                    console.log(err)
                })

            },
            submit() {
                if (this.step == 1) {
                    this.$refs['formPhone1'].validate((valid) => {
                        if (valid) {
                            this.loading = true;
                            let params = JSON.parse(JSON.stringify(this.params));
                            this.$post("/user/getPhoneToken", params).then((res) => {
                                this.loading = false;
                                this.step = 2;
                                this.params = {
                                    phoneToken: res.data
                                };
                            }).catch(err => {
                                this.loading = false;
                                console.log(err)
                            })
                        }
                    });

                } else {
                    this.$refs['formPhone2'].validate((valid) => {
                        if (valid) {
                            this.loading = true;
                            let params = JSON.parse(JSON.stringify(this.params));
                            this.$post("/user/updatePhone", params).then((res) => {
                                this.$notify({offset: 60, title: '成功', message: '修改成功', type: 'success'});
                                this.loading = false;
                                this.dialogVisible = false;
                                this.step = 1;
                                this.params = {};
                            }).then(() => {
                                this.getUserInfo();
                            }).catch(err => {
                                this.loading = false;
                                console.log(err)
                            })
                        }
                    });
                }


            }
        },
        mounted() {
            this.getUserInfo();
        }
    }

</script>

<style>
    .account-container .main-form {
        width: 50%;
    }
</style>